<template>
  <div id="app">
    <input type="text" v-model="keyword" placeholder="输入关键字搜索" />
    <patient-record-table :records="filteredRecords" @showDetail="showDetail" />
    <patient-record-detail v-if="showDetailFlag" :record="currentRecord" @close="closeDetail" />
  </div>
  
</template>

<script>
import PatientRecordTable from './components/PatientRecordTable.vue';
import PatientRecordDetail from './components/PatientRecordDetail.vue';

export default {
  components: {
    PatientRecordTable,
    PatientRecordDetail
  },
  data() {
    return {
      keyword: '',
      records: [
        {
    date: '2022-01-01',
    doctor: '张三',
    diagnosis: '感冒',
    prescription: '感冒药',
  },
  {
    date: '2022-02-01',
    doctor: '李四',
    diagnosis: '头疼',
    prescription: '止疼药',
  },
  {
    date: '2022-03-01',
    doctor: '王五',
    diagnosis: '腰痛',
    prescription: '止痛贴',
  }
      ],
      filteredRecords: [],
      showDetailFlag: false,
      currentRecord: {}
    };
  },
  watch: {
    keyword(newVal) {
      // 根据关键词过滤就诊记录数据
      this.filteredRecords = this.records.filter(record => {
        return Object.values(record).some(value => {
          return String(value).toLowerCase().includes(newVal.toLowerCase());
        });
      });
    }
  },
  methods: {
    showDetail(record) {
      this.currentRecord = record;
      this.showDetailFlag = true;
    },
    closeDetail() {
      this.showDetailFlag = false;
    }
  },
  mounted() {
    // 初始化时先设置初始的过滤数据为全部记录
    this.filteredRecords = this.records;
  }
};
</script>

<style>
/* 可以添加一些样式来美化页面 */
</style>